<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="header">
    <img src="../../assets/visual/头部.png" class="back-image-header" />
    <span class="time-container">{{data.realTime}} {{data.time}}</span>
    <div class="router-container">
      <span
        :class="['router-item', 'left1','/main'=== data.currPath?'active-menu':'']"
        @click="navigate('/main')"
      >
        <img :src="require('../../assets/png/全局总览.png')" />
        全局总览
      </span>
      <span
        :class="['router-item' ,'left2','/main/realTimeVideo' === data.currPath?'active-menu':'']"
        @click="navigate('/main/realTimeVideo')"
      >
        <img :src="require('../../assets/png/实时视频.png')" />
        实时视频
      </span>
      <span class="split-item"></span>
      <span
        :class="['router-item' ,'left3','/main/warning'=== data.currPath?'active-menu':'']"
        @click="navigate('/main/warning')"
      >
        <img :src="require('../../assets/png/告警历史.png')" />告警历史
      </span>
      <span
        :class="['router-item' ,'left4','/main/orientation'=== data.currPath?'active-menu':'']"
        @click="navigate('/main/orientation')"
      >
        <img :src="require('../../assets/png/icon-实时定位.png')" />实时定位
      </span>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { reactive, onMounted, ref, onUnmounted, watch } from "vue";
import dayjs from "dayjs";

const router = useRouter();
const route = useRoute();
const interval = ref(null);
const dayMap = {
  1: "一",
  2: "二",
  3: "三",
  4: "四",
  5: "五",
  6: "六",
  0: "日"
};
const data = reactive({
  realTime: "",
  time: "",
  currPath: ""
});
watch(
  () => route.path,
  curr => {
    data.currPath = curr;
  }
);
const routerVisual = () => {
  window.open("#/visualspectrahub", "_blank");
};
onMounted(() => {
  data.currPath = sessionStorage.getItem("path") || "/main";
  interval.value = setInterval(() => {
    const date = dayjs().format("YYYY-MM-DD");
    const day = dayjs().day();
    data.time = dayjs().format("HH:mm:ss");
    data.realTime = `${date} 星期${dayMap[day]}`;
  }, 1000);
});
onUnmounted(() => {
  clearInterval(interval.value);
});

const navigate = rouerPath => {
  router.push(rouerPath || "/");
  sessionStorage.setItem("path", rouerPath);
};
const navList = [
  {
    label: "全局总览",
    rouerPath: "/main",
    icon: require("../../assets/png/全局总览-default.png"),
    activeIcon: require("../../assets/png/全局总览-selected.png")
  },
  {
    label: "实时视频",
    rouerPath: "/main/realTimeVideo",
    icon: require("../../assets/png/实时视频-default.png"),
    activeIcon: require("../../assets/png/实时视频-selected.png")
  },
  {
    label: "热力统计",
    rouerPath: "/main/statistic",
    icon: require("../../assets/png/热力系统-default.png"),
    activeIcon: require("../../assets/png/热力系统-selected.png")
  },
  {
    label: "告警历史",
    rouerPath: "/main/warning",
    icon: require("../../assets/png/告警历史-default.png"),
    activeIcon: require("../../assets/png/告警历史-selected.png")
  }
  // {
  //   label: "设备管理",
  //   rouerPath: "/main/settingEquipment",
  //   icon: require("../../assets/png/setting-default.png"),
  //   activeIcon: require("../../assets/png/setting-selected.png")
  // }
];
const logout = () => {
  sessionStorage.clear();
  router.push("/login");
};
</script>

<style lang="less">
.header {
  height: 85px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .back-image-header {
    width: 100%;
    height: 64px;
  }
  .time-container {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin-top: -15px;
  }
  .router-container {
    height: 54px;
    margin: 0 200px;
    position: absolute;
    background: transparent;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .left1,
    .left3 {
      margin-right: 42px;
    }
    .active-menu {
      filter: opacity(1) !important;
    }
    .router-item {
      filter: opacity(0.6);
      cursor: pointer;
      color: #ffffff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 14px;
        height: 14px;
        margin-right: 10px;
      }
    }
    .split-item {
      flex: 1;
    }
  }
}
.route-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
.el-dropdown-link {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  &:focus-visible {
    outline: none !important;
    --el-dropdown-menuItem-hover-color: none !important;
    --el-dropdown-menu-box-shadow: none !important;
    --el-dropdown-menuItem-hover-fill: none !important;
  }
}
.icon-logout {
  margin: 0 16px;
  cursor: pointer;
  width: 16px;
  height: 16px;
}
</style>